<template>
  <view class="customer-card" @tap="goToCare">
    <image class="customer-avatar" :src="customer.imageUrl || defaultAvatar" mode="aspectFill" />
    <view class="customer-info">
      <text class="customer-name">{{ customer.customerName }}</text>
      <view class="customer-detail">
        <text>性别：{{ customer.gender }}</text>
        <text> 血型：A</text> <!-- 血型字段暂无，从后台补上或先写死 -->
        <text> 年龄：{{ customer.age }}</text>
      </view>
      <view class="customer-detail">
        <text>床位：{{ customer.roomNumber }}-{{ customer.bedNumber }}</text>
      </view>
      <view class="customer-detail">
        <text>入住时间：{{ formatDate(customer.checkInDate) }} - 2026-10-10</text> <!-- 退住时间你可加字段 -->
      </view>
      <view class="customer-detail phone">
        <text class="phone-label">联系电话：</text>
        <text class="phone-number">{{ customer.phoneNumber }}</text>
      </view>
    </view>
    <button class="care-button">去护理</button>
  </view>
</template>


<script>
export default {
  name: "CustomerCard",
  props: {
    customer: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      defaultAvatar: '/static/images/default-avatar.png'
    };
  },
  methods: {
    formatDate(dateTime) {
      if (!dateTime) return '';
      const date = new Date(dateTime);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    goToCare() {
        const { customerId, customerName } = this.customer;
        uni.navigateTo({
          url: `/pages/careMenu/careMenu?customerId=${customerId}&name=${encodeURIComponent(customerName)}`
        });
      },
  }
};
</script>

<style scoped>
.customer-card {
  display: flex;
  align-items: flex-start;       /* 头像顶部对齐信息区 */
  padding: 16px;                 /* 增大内边距 */
  border-radius: 16px;           /* 更大圆角 */
  background-color: #FFFFFF;     /* 柔和淡紫背景 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

  /* 居中 & 限制宽度 */
  width: calc(100% - 32px);      /* 左右各留16px */
  max-width: 327px;
  margin: 0 auto 16px;           /* 顶部0，底部16px，左右auto */
  margin-right: 15px;
  margin-left: 15px;
  position: relative;
}

.customer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 14px;            /* 增大头像与信息区间距 */
  flex-shrink: 0;
}

.customer-info {
  flex: 1;
}

.customer-name {
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  margin-bottom: 8px;            /* 姓名与详情更大间距 */
}

.customer-detail {
  font-size: 14px;
  color: #555555;
  line-height: 1.6;              /* 增大行高 */
  margin-bottom: 6px;            /* 各行间距 */
}

.customer-detail text {
  margin-right: 12px;            /* 各字段项间距 */
}

.phone {
  margin-top: 8px;
}

.phone-label {
  font-size: 14px;
  color: #555555;
}

.phone-number {
  font-size: 14px;
  font-weight: 600;
  color: #00C3B0;                /* 突出色 */
}

.care-button {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background-color: #00C3B0;     /* 与电话同色 */
  color: #FFFFFF;
  font-size: 14px;
  padding: 6px 14px;             /* 增大点击区域 */
  border-radius: 12px;
  line-height: 1;
}
</style>